<template>
    <!-- 会员权益 -->
    <div class="mt membership_benefits">
        <div class="member_title">
            <h1>会员权益</h1>
            <el-link class="look" type="info">查看全部</el-link>
        </div>
        <div class="benefits">
            <el-row :gutter="20">
                <el-col style="margin-top: 10px;" :span="6" v-for="(item,index) in member_gift" :kye="item.id">
                    <el-card style="height: 130px;">
                        <img :src="item.src" style="width: 20px;height:20px;">
                        <h4>{{ item.name }}</h4>
                        <p>{{ item.namespace }}</p>
                    </el-card>
                </el-col>
                <!-- <el-col :span="6">
                    <el-card>
                        <img class="img1" src="@/assets/percent.png" alt="" style="width: 20px;height: 20px;">
                        <h4>购物商品8折</h4>
                        <p>全品类通用</p>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <img class="img2" :src="GIFT" alt="" style="width: 20px;height: 20px;">
                        <h4>生日礼包</h4>
                        <p>价值￥199</p>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <img class="img3" :src="Listen" alt="" style="width: 20px;height: 20px;">
                        <h4>专属客服</h4>
                        <p>7×24小时</p>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <img class="img4" :src="SEND" alt="" style="width: 20px;height: 20px;">
                        <h4>免费赠送</h4>
                        <p>可将次卡免费增送至多4人</p>
                    </el-card>
                </el-col> -->
            </el-row>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getMemberGiftList } from '@/api/recharge'
interface memberGiftType {
    id: number,
    icon: string,
    name: string,
    src: string,
    year_card: number,
    create_name: string,
    namespace: string
}
const member_gift = ref<memberGiftType[]>([])
onMounted(async () => {
    const { data } = await getMemberGiftList(1)
    member_gift.value = data.list

})
</script>


<style scoped lang="less">
.membership_benefits {
    .benefits {
        img {
            margin-bottom: 10px;
            width: 50px;
            height: 50px;
        }

        h4 {
            margin-bottom: 4px;
        }

        p {
            font-size: 14px;
            color: gray;
            overflow: hidden;
            
        }

        .img1 {
            background-color: #edf4ff;
            border-radius: 50%;
            padding: 10px;
        }

        .img2 {
            background-color: rgba(255, 165, 0, 0.2);
            border-radius: 50%;
            padding: 10px;
        }

        .img3 {
            background-color: #edf4ff;
            border-radius: 50%;
            padding: 10px;
        }

        .img4 {
            background-color: #edf4ff;
            border-radius: 50%;
            padding: 10px;
        }
    }
}
</style>